{% extends 'movies_base.html' %}
{% load static %}

{% block body_style %}
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    background-image: url("{{ MEDIA_URL }}{{ user_profile.background_image }}");
    background-size: cover;
}
{% endblock %}
{% block head %}
<style>
    <!-- body {} 在block body_style使用母版重构了 -->
    .detail-container {
        max-width: 2000px;
        margin: 50px auto;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
        overflow: auto;
    }

    .detail-p {
        font-size: 20px;
    }

    .celebrity-container {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        /* 横向滚动条，适应多个卡片 */
    }

    .celebrity-card {
        margin: 20px;
        text-align: center;
    }

    .celebrity-image {
        max-width: 150px;
        max-height: 200px;
        border-radius: 50%;
    }

    .director-container {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        /* 横向滚动条，适应多个卡片 */
    }

    .director-card {
        margin: 20px;
        text-align: center;
    }

    .director-image {
        max-width: 150px;
        max-height: 200px;
        border-radius: 50%;
    }
</style>
{% endblock %}

{% block title %}
电影详情
{% endblock %}
{% block body %}
<div class="detail-container">
    {% block content %}
        <div class="container mt-4">
            <h2>{{ movie.title }}</h2>
            <div class="row">
                <div class="col-md-5">
                    {% if movie.images %}
                        <img id="movieImage" alt="{{ movie.title }}" class="img-fluid" width="600px">
                    {% endif %}
                </div>
                <div class="col-md-6">
                    <h3>电影详情</h3>
                    <p class="detail-p"><strong>原始标题:</strong> {{ movie.original_title }}</p>
                    <p class="detail-p"><strong>评分:</strong></p>
                    <ul>
                        <li class="detail-p">最高分: <span id="maxValue"></span></li>
                        <li class="detail-p">平均分: <span id="averageValue"></span></li>
                    </ul>
                    <p class="detail-p"><strong>评分数:</strong> {{ movie.ratings_count }}</p>
                    <p class="detail-p"><strong>语言: </strong><span id="lang">{{ movie.languages }}</span></p>
                    {#                    <p class="detail-p"><strong>上映日期:</strong> {{ movie.pubdate }}</p>#}
                    <p class="detail-p"><strong>上映日期:</strong><span id="pubdate"></span></p>
                    <p class="detail-p"><strong>年份:</strong> {{ movie.year }}</p>
                    <p class="detail-p"><strong>制片国家/地区:</strong><span id="countries"></span>
                    </p>
                    <p class="detail-p"><strong>别名:</strong><span id="aka"></span></p>
                    <p class="detail-p"><strong>标签:</strong><span id="tags"></span></p>
                    <p class="detail-p"><strong>时长:</strong><span id="durations"></span></p>
                    <p class="detail-p"><strong>类型:</strong><span id="genres"></span></p>

                </div>
                <div class="col-md-12" style="margin-top: 20px">
                    {#                    <p><strong>短视频:</strong> {{ movie.videos }}</p>#}
                    {#                    <p><strong>想看人数:</strong> {{ movie.wish_count }}</p>#}
                    {#                    <p><strong>短评数:</strong> {{ movie.reviews_count }}</p>#}
                    {#                    <p><strong>评论数:</strong> {{ movie.comments_count }}</p>#}
                    {#                    <p><strong>收藏数:</strong> {{ movie.collect_count }}</p>#}
                    {#                    <p><strong>封面图片:</strong> {{ movie.images }}</p>#}
                    {#                    <p><strong>照片:</strong> {{ movie.photos }}</p>#}

                    <p class="detail-p"><strong>简介:</strong> {{ movie.summary }}</p>

                    {#                    <p><strong>录入时间:</strong> {{ movie.record_time }}</p>#}
                </div>
                <div id="导演">
                    <h2>导演名单</h2>
                    <div class="director-container" id="directorContainer">

                    </div>
                </div>
                <div id="导演">
                    <h2>编剧名单</h2>
                    <div class="director-container" id="writerContainer">

                    </div>
                </div>


                <div id="actor">
                    <h2>演员名单</h2>
                    <div class="celebrity-container" id="celebrityContainer">

                    </div>
                </div>

            </div>
        </div>
    {% endblock %}

</div>
<script>
    //封面图片
    const movieImageString = " {{ movie.images }}";
    const decodedMovieImage = new DOMParser().parseFromString(`<!DOCTYPE html><body>${movieImageString}`, 'text/html').body.textContent;
    const movieImageData = JSON.parse(decodedMovieImage.replace(/'/g, "\"")); // 替换单引号为双引号
    document.getElementById('movieImage').src = movieImageData["small"];

    //电影评分
    const movieRatingString = '{{movie.rating}}';
    const decodedRating = new DOMParser().parseFromString(`<!DOCTYPE html><body>${movieRatingString}`, 'text/html').body.textContent;
    const ratingData = JSON.parse(decodedRating.replace(/'/g, "\"")); // 替换单引号为双引号
    document.getElementById('maxValue').innerText = ratingData["max"];
    document.getElementById('averageValue').innerText = ratingData["average"];

    //明星卡片
    const celebritiesString = '{{movie.actor}}';
    const decodedCelebrities = new DOMParser().parseFromString(`<!DOCTYPE html><body>${celebritiesString}`, 'text/html').body.textContent;
    const celebritiesData = JSON.parse(decodedCelebrities.replace(/'/g, "\"")); // 替换单引号为双引号
    var celebrityContainer = document.getElementById('celebrityContainer');

    celebritiesData.forEach(function (celebrity) {
        var card = document.createElement('div');
        card.className = 'celebrity-card';

        var image = document.createElement('img');
        image.className = 'celebrity-image';
        image.src = celebrity.avatars.medium;
        image.alt = celebrity.name;

        var nameParagraph = document.createElement('p');
        nameParagraph.textContent = celebrity.name;

        card.appendChild(image);
        card.appendChild(nameParagraph);
        celebrityContainer.appendChild(card);
    });


    // Get the container element

    //导演卡片
    const directorsString = '{{movie.directors}}';
    const decodedDirectors = new DOMParser().parseFromString(`<!DOCTYPE html><body>${directorsString}`, 'text/html').body.textContent;
    const directorsData = JSON.parse(decodedDirectors.replace(/'/g, "\"")); // 替换单引号为双引号
    var directorContainer = document.getElementById('directorContainer');
    // Loop through the data and create director cards
    directorsData.forEach(function (director) {

        var card = document.createElement('div');
        card.className = 'director-card';

        var image = document.createElement('img');
        image.className = 'director-image';
        image.src = director.avatars.medium; // You can choose 'small', 'large', or 'medium' based on your preference
        image.alt = director.name;


        var nameParagraph = document.createElement('p');
        nameParagraph.textContent = director.name;

        card.appendChild(image);
        card.appendChild(nameParagraph);
        directorContainer.appendChild(card);
    });
    // 编剧卡片
    const writersString = '{{movie.writers}}';
    const decodedWriters = new DOMParser().parseFromString(`<!DOCTYPE html><body>${writersString}`, 'text/html').body.textContent;
    const writersData = JSON.parse(decodedWriters.replace(/'/g, "\"")); // 替换单引号为双引号
    var writerContainer = document.getElementById('writerContainer'); // 请确保你有一个 id 为 'writerContainer' 的元素用于插入编剧卡片

    // Loop through the data and create writer cards
    writersData.forEach(function (writer) {
        var card = document.createElement('div');
        card.className = 'director-card';

        var image = document.createElement('img');
        image.className = 'director-image';
        image.src = writer.avatars.medium; // 选择 'small'、'large' 或 'medium'，根据需要调整
        image.alt = writer.name;

        var nameParagraph = document.createElement('p');
        nameParagraph.textContent = writer.name;

        card.appendChild(image);
        card.appendChild(nameParagraph);
        writerContainer.appendChild(card);
    });


    function removeChars(inputString) {
        // 使用正则表达式替换单引号、左方括号和右方括号为空字符串
        return inputString.replace(/['\[\]]/g, '');
    }

    //语言
    const movieLanguageString = " {{ movie.languages }}";
    const decodedMovieLanguage = new DOMParser().parseFromString(`<!DOCTYPE html><body>${movieLanguageString}`, 'text/html').body.textContent;
    const movieLanguage = JSON.parse(decodedMovieLanguage.replace(/'/g, "\"")); // 替换单引号为双引号
    document.getElementById("lang").textContent = movieLanguage;

    const movieDataString = " {{ movie.pubdates }}";
    const decodedMovieData = new DOMParser().parseFromString(`<!DOCTYPE html><body>${movieDataString}`, 'text/html').body.textContent;
    document.getElementById("pubdate").textContent = removeChars(decodedMovieData);

    const movieOtherNameString = " {{ movie.aka }}";
    const decodedOtherName = new DOMParser().parseFromString(`<!DOCTYPE html><body>${movieOtherNameString}`, 'text/html').body.textContent;
    document.getElementById("aka").textContent = removeChars(decodedOtherName);

    const movieCountriesString = " {{ movie.countries }}";
    const decodedCountries = new DOMParser().parseFromString(`<!DOCTYPE html><body>${movieCountriesString}`, 'text/html').body.textContent;
    document.getElementById("countries").textContent = removeChars(decodedCountries);

    const movieTagString = " {{ movie.tags }}";
    const decodedTag = new DOMParser().parseFromString(`<!DOCTYPE html><body>${movieTagString}`, 'text/html').body.textContent;
    document.getElementById("tags").textContent = removeChars(decodedTag);

    const movieDurationsString = " {{ movie.durations }}";
    const decodedDurations = new DOMParser().parseFromString(`<!DOCTYPE html><body>${movieDurationsString}`, 'text/html').body.textContent;
    document.getElementById("durations").textContent = removeChars(decodedDurations);

    const movieGenresString = " {{ movie.genres }}";
    const decodedGenres = new DOMParser().parseFromString(`<!DOCTYPE html><body>${movieGenresString}`, 'text/html').body.textContent;
    document.getElementById("genres").textContent = removeChars(decodedGenres);

</script>
{% endblock %}